<template>
  <div class="fundHome">
    <assets-head :title="$t('基金理财')"></assets-head>
    <div class="box-border px-30 mt-42">
      <div class="flex justify-between text-grey relative">
        <div class="flex flex-col">
          <span class="text-grey font-30">{{ $t('托管金额') }}（USDT）</span>
          <span class="font-66 mt-20 font-700 textColor">{{ statiscis.amount_sum }}</span>
        </div>
      </div>
      <div class="flex mt-44 justify-between font-26 lh-32 mb-35">
        <div class="flex flex-col ">
          <div class="text-grey font-26">{{ $t('预计日收益') }}（USDT）</div>
          <div class="font-40 mt-17 mb-9  font-36 textColor">{{ statiscis.today_profit }}</div>
        </div>
        <div class="flex flex-col">
          <div class="text-grey font-26">{{ $t('累计收益') }}（USDT）</div>
          <div class="font-40 mt-17 mb-9 font-36 textColor">{{ statiscis.aready_profit }}</div>
        </div>
        <div class="flex flex-col">
          <div class="text-grey font-26">{{ $t('托管订单') }}（USDT）</div>
          <div class="font-40 mt-17 mb-9 font-36 textColor">{{ statiscis.order_sum }}</div>
        </div>
      </div>
    </div>
    <div class="flex justify-between box-border px-30 mt-43">
      <div @click="$router.push('/funds?tab=3&index=0')"
        class="greyBg text-grey w-370 h-75 lh-75 rounded-lg font-27 text-center mr-20 active">{{$t('托管订单')}}</div>
      <div @click="$router.push('/fund-rule')"
        class="greyBg text-grey w-370 h-75 lh-75 rounded-lg font-27 text-center">{{$t('规则')}}</div>
    </div>
    <div class="px-30 mt-40 pb-80">
      <div v-for="(item, index) in list" :key="index"
        class="card flex justify-between items-center relative rounded-lg borderColor contBackground">
        <div class="title absolute px-16 py-8 font-26 text-white bg-green top-0 left-22">{{ $t('日收益率')
          }} <span class="ml-8">{{item.daily_rate}}%</span></div>
        <div class="flex justify-center items-center">
          <img class="w-120 h-130 mr-20" :src="item.img" alt="">
          <div class="flex flex-col items-start">
            <span class="font-35 font-600 textColor">
              <template v-if="$i18n.locale === 'CN'">
                  {{ item.name_cn }}
              </template>
              <template v-else-if="$i18n.locale === 'zh-CN'">
                {{ item.name }}
              </template>
              <template v-else>
                {{item.name_en}}
              </template>
            </span>
            <span class="font-26 mt-24 mb-16 textColor">{{ $t('限额') }} {{item.investment_min + ' ~ ' + item.investment_max}}
              USDT</span>
            <span class="font-26 textColor">{{ $t('周期') }} {{item.cycle}} {{$t('天')}}</span>
          </div>
        </div>
        <div @click="$router.push({
          path: '/fund-buy',
          query: {
            ...item
          }
        })" class="active py-16 px-30 font-30 font-600 rounded-lg">{{ $t('立即买入') }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import {financeStatics, getfinacialProductsList} from "@/API/financialManagement";

export default {
  name: "fundHome",
  components: {
    assetsHead,
  },
  data() {
    return {
      statiscis: {},
      list: []
    }
  },
  methods: {
  },
  activated() {
    getfinacialProductsList().then(res => {
      //console.log('理财列表', res)
      this.list = res
    })
    financeStatics().then(res => {
      //console.log('理财统计', res)
      this.statiscis = res
    })
  },
  created() {
    getfinacialProductsList().then(res => {
      //console.log('理财列表',res)
      this.list = res
    })
    financeStatics ().then(res => {
      //console.log('理财统计',res)
      this.statiscis = res
    })
  }
}
</script>

<style lang="scss" scoped>
.fundHome{
  width: 100%;
  box-sizing: border-box;
}
.active {
    color: #000;
    background: $btn_main;
    border-color: $btn_main;
}
.title {
  border-radius: 0 0 8px 8px;
}
.card {
  padding: 80px 22px 22px 22px;
  margin-bottom: 32px;
}
</style>
